<template>
  <!-- 店铺管理页 -->
  <div class="maxBox">
    <!-- 标题组件 -->
    <panel title="店铺管理">
      <el-button type="primary" slot="btn" @click="saveBtn()">保存</el-button>

        <el-form :model="formData">
      <el-form-item label="店铺名称" label-width="80px">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="店铺公告" label-width="80px">
        <el-input type="textarea" v-model="formData.bulletin"></el-input>
      </el-form-item>
      <!-- 店铺头像 -->
      <el-form-item label="店铺头像" label-width="80px">
        <el-upload class="avatar-uploader" action="http://localhost:5000/shop/upload" :show-file-list="false" :on-success="uploadImgSuccess">
          <img v-if="avatar" :src="baseUrl+avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item> 
      <!-- 店铺多图 -->
      <el-form-item label="店铺图片" label-width="80px">
        <el-upload action="http://localhost:5000/shop/upload" list-type="picture-card" :on-preview="handlePictureCardPreview" 
        :show-file-list= true
        :file-list="fileList"
        :on-success="uploadImgs"
        :on-remove="delImage">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item label="配送费" label-width="80px">
        <el-input v-model="formData.deliveryPrice"></el-input>
      </el-form-item>
      
      <el-form-item label="起送价格" label-width="80px">
        <el-input v-model="formData.minPrice"></el-input>
      </el-form-item>
      <el-form-item label="送达时间" label-width="80px">
        <el-input v-model="formData.deliveryTime"></el-input>
      </el-form-item>

      <el-form-item label="描述" label-width="80px">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>
      <el-form-item label="评分" label-width="80px">
        <el-input v-model="formData.score"></el-input>
      </el-form-item>
      <el-form-item label="销量" label-width="80px">
        <el-input v-model="formData.sellCount"></el-input>
      </el-form-item>

      <el-form-item label="活动"  label-width="80px">
        <el-checkbox-group v-model="formData.supports">
          <el-checkbox label="在线支付满28减5" ></el-checkbox>
          <el-checkbox label="VC无限橙果汁全场8折" ></el-checkbox>
          <el-checkbox label="单人精彩套餐" ></el-checkbox>
          <el-checkbox label="特价饮品8折抢购" ></el-checkbox>
          <el-checkbox label="单人特色套餐" ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

       <el-form-item label="营业时间">
            <el-time-picker
              is-range
              v-model="formData.date"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围">
            </el-time-picker>
       </el-form-item>

    </el-form>
    </panel>

  </div>
</template>


<script>
// 导入公共标题组件
import Panel from "@/components/Panel.vue";
import {shopInfo,shopEdit} from '@/api/shop.js'  //店铺详情 店铺修改
import {getFileName} from '@/utils/util.js'  //截取文件名


export default {
  data() {
      return {
      formData: {
        //店铺名称
        name: '', 
        //店铺公告
        bulletin: '', 
        //配送费
        deliveryPrice: '', 
        //送达时间
        deliveryTime: '', 
        //描述
        description: '', 
        //评分
        score: '', 
        //销量
        sellCount: '',
        //活动
        supports:[],
        //营业时间
        date:[],
        //起送价格
        minPrice:''
      },
      //店铺头像
      avatar: '',
      //图片多图
      fileList:[],
      //点击的图片弹窗
      dialogImageUrl: '',
      //图片点击 弹窗显示和隐藏
      dialogVisible: false,
      baseUrl:"http://localhost:5000",
    };
  },

  //事件方法
   methods: {
  
    //保存数据按钮
   async saveBtn(){
      //修改需要提交的数据中的头像的url
      this.formData.avatar = getFileName(this.avatar) 
      //店铺多图
      this.formData.pics = [];
      this.formData.pics = this.fileList.map(item=>{
        return item.name;
      })
      // 调用接口
      // 全转为字符串类型
      this.formData.supports =JSON.stringify(this.formData.supports);
      this.formData.date = JSON.stringify(this.formData.date);
      this.formData.pics = JSON.stringify(this.formData.pics);
      console.log(this.formData);
      //调用接口请求
      let res  = await shopEdit(this.formData);
      console.log(res);
      this.$router.go(0); //点击保存 直接刷新页面
    },
    //上传头像回调函数
    uploadImgSuccess(res) {
      this.avatar = res.imgUrl;
    },
    //点击已上传的图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除图片时触发  
    delImage(file, files) {
      // json转换
      this.fileList = JSON.parse(JSON.stringify(files))
    },
      //多张图片上传
    uploadImgs(res){
        this.fileList.push({
          name:getFileName(res.imgUrl),
          url:this.baseUrl+res.imgUrl
        })
    },
    // 获取数据
    async getShopInfo(){
        let res = await shopInfo();
        console.log(res);
        let {data} = res.data
        this.formData = data;
        //店铺头像获取
        this.avatar = this.formData.avatar;
        //店铺图片多图
        this.fileList = data.pics.map(item=>{
          return {
            name:getFileName(item),
            url:this.baseUrl+item, 
          }
        })
    }
  },
  // 进入页面调用
    created(){
      this.getShopInfo()
     },
  // 注册组件
  components: {
    Panel,
  },
};
</script>

<style lang="less" scoped>
.maxBox {
  width: 100%;
  height: 100%;
  .contentBox {
    margin: 12px auto 0 auto;
    width: 98%;
    background: #fff;
  }
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>